{% extends "bootstrap/base.html" %}

{% block styles %}
    {{ super() }}
    <meta name="referrer" content="no-referrer">
    <!-- 使用favicon.ico图标 -->
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" />
    <!-- 引用初始化init.css样式文件 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='css/init.css') }}" />
    <!-- 导入模板样式base.css -->
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}">
{% endblock %}

{# 导航条nav #}
{% block navbar %}
    <nav class="navbar">
      <div class="w">
        <div class="navcontent">
          <ul id="fr">
            <li><a href="{{ url_for('house_bp.index') }}?city={{ city }}">首页</a></li>
            <li><a href="{{ url_for('house_bp.ershoufang',city=city) }}">二手房</a></li>
            <li><a href="{{ url_for('house_bp.newhouse',city=city) }}">新房</a></li>
            <li><a href="{{ url_for('house_bp.renthouse',city=city) }}">租房</a></li>
            <li><a href="javascript:;">海外</a></li>
            <li><a href="javascript:;">小区</a></li>
            <li><a href="javascript:;">房源指数</a></li>
            <li><a href="javascript:;">规划手册</a></li>
            <li><a href="javascript:;">房产手册</a></li>
            <li><a href="javascript:;">绿化指标</a></li>
            <li><a href="javascript:;">品质生活</a></li>
          </ul>
          <div id="fl">
            {% if user %}
              <!-- 惠房用户 -->
              <ul class="user-list">
                <li class="user-item">
                    <img src="{% if user.icon %}  {{ url_for('static',filename=user.icon) }} {% else %}{{ url_for('static',filename='images/Avatar.jpg') }}{% endif %}" alt="">
                </li>
                <li class="user-item" id="onclick">
                    <a href="javascript:;" class="username">欢迎 · {{ user.username }} <i class="swhe"></i></a>
                    <ul>
                        <li class="user-info"><a href="{{ url_for('user_bp.user_center') }}">用户中心</a></li>
                        <li class="user-info"><a href="{{ url_for('user_bp.logout') }}">退出登录</a></li>
                    </ul>
                </li>
              </ul>
            {% else %}
              <!-- 登录注册 -->
              <div class="typeShowUser">
                <span class="welcome">
                    <a href="{{ url_for('user_bp.login') }}">
                        <span class="log">登录</span>
                    </a>
                    <span>&nbsp;/&nbsp;</span>
                    <a href="{{ url_for('user_bp.register') }}">
                        <span class="regi">注册</span>
                    </a>
                </span>
            </div>
          {% endif %}
          </div>
        </div>
      </div>
    </nav>
{% endblock %}

{% block content %}

    {% block newcontent %}
        <h1>Hello, Bootstrap</h1>
    {% endblock %}
{% endblock %}

<!-- {% block footer %}
  <div class="myfoot">京ICP备11008000号-6京公网安备11010802020923</div>
{% endblock %} -->

<!-- 添加js事件 -->
{% block scripts %}
    {{ super() }}
    {% if user %}
      <script>
        // 显示与隐藏用户登录
        // 1、获取元素
        var li = document.querySelector('#onclick');
        // 获取li标签的第二个子元素节点——ul标签
        var uluser = li.children[1];
        // 获取li标签的第一个子元素节点——a标签
        var a = li.children[0];
        var i = a.children[0];
        // console.log(i);
        var flag = 0;
        a.onclick = function() {
            if (flag == 0) {
                i.innerHTML = '';
                // console.log(i.innerText)
                uluser.style.display = 'block';
                flag = 1; // 赋值操作
            }else {
                i.innerHTML = '';
                uluser.style.display = 'none';
                flag = 0;
            };
        };
      </script>
    {% endif %}
{% endblock %}
